<template>
  <div>
    <div class="goods_nav">
      <van-nav-bar title="商品列表">
        <template #left>
          <span @click="back" class="iconfont icon-fanhui"></span>
        </template>
        <template #right></template>
      </van-nav-bar>
    </div>

    <div class="goods_container">
      <div class="goods_card" v-for="(item,index) in showlist" :key="index">
        <img width="100%" :src="item.pic" alt />
        <div class="goods_cons">
          <p class="van-multi-ellipsis--l2">{{item.title}}</p>
          <p class="card_price">
            <span>
              ￥
              <span class="price">{{item.price}}</span>
            </span>
            <span class="iconfont icon-gouwuche"></span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    back() {
      window.history.back();
    }
  },
  computed: {
    showlist: function() {
      console.log(this.$store.state.showlist);
      return this.$store.state.showlist;
    }
  }
};
</script>

<style scoped>
.goods_nav {
  width: 100%;
  border-bottom: 1px solid lightgrey;
  position: fixed;
  top: 0px;
  left: 0px;
}
.goods_container {
  width: 100%;
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.goods_card {
  width: 48%;
  border: 1px solid lightgrey;
  margin: 5px 0px;
}
.goods_cons {
  width: 100%;
  box-sizing: border-box;
  padding: 0px 5px;
  font-size: 14px;
}
.card_price {
    font-size: 12px;
    color: red;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px;
}
.price {
    font-size: 18px;
    font-weight: 550;
}
.icon-gouwuche {
    font-size: 20px;
    color: #999;
}
</style>